<template>
  <div class="person-content">
    <el-form ref="pram" :model="formValidate" label-width="100px" @submit.native.prevent>
      <div class="person-list">
        <div class="person-item"
             v-for="item in formValidate.list"
             :key="item.id"
             draggable="true"
             @dragstart="handleDragStart($event, item.id)"
             @dragover.prevent="handleDragOver($event, item.id)"
             @dragenter="handleDragEnterFont($event, item.id)"
             @dragend="handleDragEnd($event, item.id)"
             @click="goPersonList(item.id)"
        >
          <img :src="item.faceUrl" class="person-photo" style="pointer-events: none;"/>
          <div class="person-name">{{item.name}}</div>
          <div class="person-position">{{item.positionDesc}}</div>
        </div>
      </div>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:department:person:order']">更新</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as personApi from "@/api/person";
import {Debounce} from "@/utils/validate";
import * as computerApi from "@/api/computer";
import {personUpdateSort} from "@/api/person";
const defaultObj = {
  list:[],
}
export default {
   name: "person",
  props: {
    prent: {
      type: Object,
      required: true
    },
    biztype: {
      type: Object,
      required: true
    },
    editData: {
      type: Object
    },
    allTreeList: {
      type: Array
    }
  },
  data() {
    return {
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      formValidate: Object.assign({}, defaultObj),

      //list:[],
      loadingBtn: false,
      constants: this.$constants,
      listPram: {
        /*name: null,
        pid: null,
        sort: 0,
        status: true,
        isCards: false,
        level: null,
        id: 0*/

        depIds:'',
        page: 1,
        limit: /*this.$constants.page.limit[0]*/10000
      },
      order:false,
    }
  },
  mounted() {
     this.handleGetPersonList()
  },
  methods: {
    close() {
      this.$emit('hidePersonDialog')
    },

    // 移动
    handleDragStart (e, item) {
      if(!this.isDisabled) this.dragging = item;
    },
    handleDragEnd (e, item) {
      if(!this.isDisabled) this.dragging = null
    },
    handleDragOver (e) {
      if(!this.isDisabled) e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter (e, item) {
      if(!this.isDisabled){
        e.dataTransfer.effectAllowed = 'move'
        if (item === this.dragging) {
          return
        }
        /*const newItems = [...this.formValidate.sliderImages]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.formValidate.sliderImages = newItems;*/
      }
    },
    handleDragEnterFont(e, item) {
      if(!this.isDisabled){
        e.dataTransfer.effectAllowed = 'move'
        if (item === this.dragging) {
          return
        }
        const newItems = [...this.formValidate.list]

        let src,dst
        newItems.forEach((p,k)=>{
          if(p.id === this.dragging){
            src = k //原键
            return
          }
        })
        newItems.forEach((p,k)=>{
          if(p.id === item){
            dst = k //移动后键
            return
          }
        })

        //const src = newItems.indexOf(this.dragging)
        //const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1)) //新地方删掉0个，并加上原地方删掉一个后的数组
        this.formValidate.list = newItems;
      }
    },

    handleGetPersonList() {
      const { id } = this.editData
      this.listPram.depIds = id

      personApi.personList( this.listPram ).then(data => {
        this.formValidate.list = data.list
      })
    },

    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
          this.handlerEdit()
      })
    }),
    handlerEdit() {
      let personIdListSortted = []
      let sortted = []
      this.formValidate.list.forEach((p)=>{
        personIdListSortted.push(p.id)
        sortted.push(p.sort)
      })
      personIdListSortted = personIdListSortted.join(',')
      sortted = sortted.sort(this.sortOrder).join(',')

      personApi.personUpdateSort(personIdListSortted,sortted).then(data => {
        this.$message.success('更新人员排序成功')
        this.$emit('hidePersonDialog')
      })
    },
    sortOrder(a,b){
      return a-b;
    },

    goPersonList(id){
      this.$emit('hidePersonDialog')
      setTimeout(() => {
        this.$router.push(`/person/index?id=${id}`);
      }, 200);
    },
  }
}
</script>

<style scoped lang="scss">
.person-content{
  ::v-deep.el-form-item{
    margin-bottom:0;
    margin-top:20px;
  }
  ::v-deep.el-form-item__content{
    margin-left:0!important;
  }

  width: 100%;
  .person-list::-webkit-scrollbar-track {
    background-color: #F5F5F5
  }
  .person-list::-webkit-scrollbar {
    width: 3px;
    background-color: #F5F5F5
  }
  .person-list::-webkit-scrollbar-thumb {
    background-color: #d6d6d6
  }
  .person-list{
    width: 100%;
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .person-item{
      width: calc((100% - 80px)/5);
      margin-right: 20px;
      border-radius: 3px;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 20px;
      .person-photo{
        width: 100%;
        height: 200px;
      }
      .person-name{
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-top: 5px;
        font-size: 16px;
        color: #000;
      }
      .person-position{
        color: #000;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-top: 5px;
      }
    }
    .person-item:nth-child(5n){
      margin-right: 0;
    }
  }
}
</style>
